import React, { Component } from 'react';
import './index.scss';
import ImportData from './components/ImportData';
import AttendanceSheet from './components/AttendanceSheet';
import { Moment } from 'moment';
import { Button, Result } from 'antd';
import { attendanceRecordModel, officialHolidays } from './components/ImportData/parseAttendanceFileToModel/store';
import UndefinedWorker from './components/ImportData/parseAttendanceFileToModel/UndefinededWorker';
import { exportData } from './exportData';
import { groupByDepartment } from './attendanceTabelInfoHandler';
import Department from './components/ImportData/parseAttendanceFileToModel/Department';
import { AttendanceRecordItemModel } from './components/ImportData/parseAttendanceFileToModel/store';

export interface State {
    model: Map<Department, AttendanceRecordItemModel[]>;
    startDate: Moment | null;
    endDate: Moment | null;
    isValid: boolean;
    officialHolidays: number;
    undefinedWorkerList: UndefinedWorker[];
}

export default class Attendance extends Component<{}, State> {
    state = {
        model: new Map<Department, AttendanceRecordItemModel[]>(),
        startDate: null,
        endDate: null,
        isValid: false,
        officialHolidays,
        undefinedWorkerList: []
    }

    updateStore = () => {
        const { attendanceRecordItemModelList, startDate, endDate, isValid, undefinedWorkerList } = attendanceRecordModel;
        const model = groupByDepartment(attendanceRecordItemModelList);
        this.setState({
            model,
            startDate,
            endDate,
            isValid,
            undefinedWorkerList,
            officialHolidays
        });
    }

    importDataRef = React.createRef<ImportData>();
    openDrawer = () => {
        this.importDataRef.current?.openDrawer();
    }

    print = () => {
        window.print();
    }

    export = () => {
        exportData(this.state.model);
    }

    render() {
        return (
            <div className="attendance">
                <div
                    className="controller"
                    hidden={!this.state.isValid}
                >
                    <Button
                        className="controller-item"
                        type="primary"
                        onClick={this.export}
                    >
                        导出汇总表
                    </Button>

                    <Button
                        className="controller-item"
                        type="primary"
                        onClick={this.print}
                    >
                        打印
                    </Button>
                </div>

                {
                    !this.state.isValid ?
                        (<Result
                            className="no-data"
                            icon={<i className="iconfont smile-icon">&#xe850;</i>}
                            title="请导入数据"
                            extra={
                                <span>让我们<Button type="link" onClick={this.openDrawer}>立即导入</Button>数据，开启高效的工作吧！</span>
                            }
                        />) : ''
                }

                <ImportData ref={this.importDataRef} onImportData={this.updateStore} onReset={this.updateStore} />
                {
                    (() => {
                        const list: JSX.Element[] = [];
                        const model = this.state.model;
                        model.forEach((item) => {
                            list.push(
                                <AttendanceSheet
                                    officialHolidays={this.state.officialHolidays}
                                    onOpenDrawer={this.openDrawer}
                                    isValid={this.state.isValid}
                                    startDate={this.state.startDate}
                                    endDate={this.state.endDate}
                                    attendanceRecordItemModelList={item}
                                />);
                        });
                        return list;
                    })()
                }
            </div >
        );
    }
}